<template>
  <div class="h100">
    <div class="settledEnt-top" @click="gohome()">
      <img src="~@/assets/reception/logo.png" />
    </div>
    <div class="settledEnt-bac">
      <img src="~@/assets/reception/settledEnt/detail.png" alt="" />
    </div>
    <div class="settledEnt-main">
      <div class="settledEnt-detail">
        <div class="a-df" style="margin: 0 auto">
          <span class="settledEnt-title">
            <span>Settled Enterprise </span>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;<span class="settledEnt-title-eng"
              >入驻企业</span
            >
          </span>
        </div>
      </div>
      <div class="settledEnt-items front">
        <div class="settledEnt-item" @click="routerpush()" v-for="item in settledEntList" :key="item.ID">
          <img :src="upload + item.GSZZZS" />
          <!-- <span class="settledEnt-item-title">东莞市公安局</span> -->
          <span class="settledEnt-item-title">{{ item.GSNAME }}</span>
          <!-- <span class="settledEnt-item-content">{{ displayContent('东莞市公安局无线对讲机通讯通信解决覆盖设计方案无线对讲方案，采用摩托罗拉的MOTOTRBO数字IP互联集群中转系统，配合双功器、天线和低损耗馈线组成的') }}</span> -->
          <span class="settledEnt-item-content">{{ displayContent(item.NAME) }}</span>
        </div>
      </div>
    </div>
    <div class="settledEnt-bac-bottom">
      <img src="~@/assets/reception/background2.png" alt="" />
    </div>
  </div>
</template>

<script>
import settledEntDetailItem from './settledEntDetailItem.vue'
import { getAPPgetQYZCListApi } from '@/api/resService'

export default {
  name: 'settledEntDetail',
  components: {
    settledEntDetailItem,
  },
  data() {
    return {
      flipped: false,
      settledEntList: [],
      settledEntItemID: '',
      upload: process.env.VUE_APP_API_BASE_URL,
    }
  },
  methods: {
    displayContent(text) {
      if (text <= 100) {
        return text
      }
      return text.slice(0, 100) + '...'
    },
    routerpush() {
      this.$router.push({ path: '/reception/settledEnt/detail/item' })
    },
    getAPPgetQYZCList() {
      getAPPgetQYZCListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 1,
      })
        .then((res) => {
          console.log('res', res)
          this.settledEntList = res.data
        })
        .catch((err) => {})
        .finally(() => {})
    },
    gohome() {
      this.$router.push({ path: '/reception/findServices/index' })
    },
  },
  mounted() {
    this.getAPPgetQYZCList()
  },
}
</script>

<style lang="less" scoped>
.settledEnt-top {
  height: 60px;
  background: #fff;
  padding: 10px 100px;
  cursor: pointer;
  img {
    height: 40px;
    display: block;
  }
}
.settledEnt-bac {
  img {
    height: 330px;
    width: 100%;
  }
}
.settledEnt-main {
  margin-top: 30px;
  .functional-module {
    width: 130px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 10px;
    img {
      margin: 5px 0;
      // height: 95px;
      cursor: pointer;
    }
  }
  .settledEnt-detail {
    margin: 0 auto;
    width: 1600px;
    display: flex;
    .settledEnt-title {
      color: #444444;
      font-size: 24px;
      display: block;
      line-height: 30px;
      margin: 0 10px;
      display: flex;
      // flex-direction: column;
      .settledEnt-title-eng {
        // font-size: 14px;
        // margin-top:-10px ;
        color: #926020;
      }
      // margin: 0 auto;
      // border-bottom: 2px solid #1e50ae;
    }
  }
  .settledEnt-items {
    display: flex;
    flex-wrap: wrap;
    .settledEnt-item {
      width: 30%;
      height: 300px;
      margin: 20px auto;
      overflow: hidden;
      border: #e7e7e7 1px solid;
      border-radius: 10px;
      cursor: pointer;
      .settledEnt-item-title {
        font-size: 20px;
        display: block;
        margin: 10px 15px;
      }
      .settledEnt-item-content {
        display: block;
        margin: 10px 15px;
      }
      img {
        width: 100%;
        height: 200px;
      }
    }
  }
}
.settledEnt-bac-bottom {
  // position: absolute;
  // bottom: -400px;
  width: 100%;
  img {
    height: 180px;
    width: 100%;
  }
}
</style>
